<template>
	<div class="main">
		<div class="header-panel">
			<XHeaderView></XHeaderView>
		</div>
		<div class="main-view">
			<div class="main-panel">
				<router-view></router-view>
			</div>
		</div>
		<div class="footer-panel">
			<XFooterView></XFooterView>
		</div>
	</div>
</template>

<script>
import XHeaderView from '@/components/XHeaderView'
import XFooterView from '@/components/XFooterView'
export default {
	components: {
		XHeaderView,XFooterView
	}
}
</script>

<style lang="less" scoped>
.main {
	width: 100%;
	min-width: 14.4rem;
	height: 100%;
	.header-panel {
		width: 100%;
		height: .7rem;
		background: rgba(255,255,255,0.1);
	}
	.main-view {
		width: 100%;
		position: absolute;
		top: .7rem;
		bottom: .6rem;
		overflow: auto;
		.main-panel {
			width: 14.4rem;
			height: 100%;
			overflow: hidden;
			margin: 0 auto;
			padding: .3rem .3rem 0 .3rem;
		}
	}
	.footer-panel {
		width: 100%;
		height: .6rem;
		position: absolute;
		bottom: 0;
	}
}
</style>